<template>
    <div id="tmpl">
        <!--评论组件-->
        <div class="postdata">
            <h3>提交评论</h3>
            <p></p>
            <textarea v-model="data" placeholder="请输入评论内容"></textarea>
            <button class="bt" @click="postdata">评论</button>
        </div>
        <div class="datalist">
            <!--评论列表-->
           <ul>
               <li v-for ='(item,index) in list'  class="content">

                   <p>{{item.content}}</p>
                   <div  class="p">
                       <span>第{{index + 1}}楼:</span>
                       <span>{{item.add_time | format('YYYY-MM-DD HH:mm:ss')}} </span>
                   </div>
               </li>
           </ul>
        </div>
        <div class="more">
            <button class="bt" @click="moredata">获取更多>>></button>
        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import {Toast} from 'mint-ui';

    export default{
        props:['id'],
        data:function(){
          return{
              list:[],
              data:'',
              page:1
          }
        },
        created:function(){
            this.getdata(this.page)
        },
        methods:{
            getdata:function(page){
                var url = common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+page;
                this.$http.get(url).then(function(res){
                    var body = res.body;
                    if(body.status!=0){
                        Toast(body.message);
                        console.log(1);
                        return
                    }
                    this.list=this.list.concat(body.message)
                })
            },
            postdata:function(){
                if(!this.data.trim()){
                    Toast('评论内容不能为空');
                    return
                }
                var url = common.apidomain+'/api/postcomment/'+this.id;
                this.$http.post(url,{content:this.data},{ emulateJSON: true }).then(function(res){
                    this.list=[{
                        "user_name": "匿名用户",
                        "add_time": new Date(),
                        "content": this.data
                    }].concat(this.list)
                    this.data='';
                })
            },
            moredata:function(){
                this.page++;
                console.log(this.page);
                this.getdata(this.page)
            }

        }
    }

</script>
<style scoped>
    .postdata,.datalist{
        padding: 10px;
    }
    .bt{
        width: 100%;
        height: 40px;
        background-color: powderblue;
        color: #ffffff;
        font-size: 20px;
    }
    ul{
        padding-left:0;
    }
    li{
        list-style: none;
    }
    .p{
        background-color: rgba(0, 0, 0, 0.1);
    }
    .content{
        padding-top: 5px;
        border:1px solid rgba(0, 0, 0, 0.1);
    }
</style>